<template>
  <div class="list-item">
    <div class="flex header pitch" v-for="(item,index) in answerList " @click="navToDetail(item)" :key="index">
      <div>
<!--        <img src="../assets/hot.png" class="hot-img">-->
        <img :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+item.postImage" alt="vedio" class="image">
      </div>
      <div class="item-title-live">
        <div class="title-text-live">{{ item.postTitle }}</div>
        <div class="footer-presenter-live">
          <span>发布人：</span>
          <span>{{item.postUid}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getAnswerList} from "@/api";

export default {
  name: "HotVedio",
  data () {
    return{
      answerList: [],
      pageNum: 1,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //更多优质解答
    morePosts() {
      this.$router.push('/communication')
    },
    //获取优质解答
    getList(pageNum=1, pageSize=4) {
      this.pageNum = pageNum
      let params = {
        pageNum: pageNum,
        pageSize: pageSize
      }
      getAnswerList(params)
        .then((res) => {
          if (res.status == 200){
            this.answerList = res.data.list
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    navToDetail(item) {
      this.$router.push({name: 'communicationDetail', params: {postId: item.postId}})
    }
  }
}
</script>

<style scoped>
/*热门视频*/
.flex{
  display: flex;
  flex-direction: row;
}
.header{
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  border: 2px solid #ffffff;
}
.list-item{
  margin-bottom: 5px;
  padding: 5px;
  cursor: pointer;
}
.pitch{
  height: 100px;
  margin: 5px;
  padding:3px ;
}
.pitch:hover{
  border: solid 2px #1bcbb4;
}
.image{
  border-radius: 5px;
  /*margin-top: -33px;*/
  width: 100px;
  height: 90px;
}
.item-title-live{
  width: 150px;
  margin-left: 4px;
  text-align: left;
  /*margin-top: -15px;*/
}
.title-text-live{
  font-size: 15px;
  font-weight: 600;
  color: #222222;
  width: 140px;
  overflow: hidden;
  white-space: pre-wrap;
  text-overflow: ellipsis;
  margin-top: 5px;
}
.footer-presenter-live{
  font-size: 12px;
  color: #222222;
  margin-top: 14px;
}

</style>
